<template>
  <view class="activity-detail">
    <!-- 活动内容 -->
    <view class="activity-content">
      <!-- 活动图片 -->
      <view class="activity-image">
        <image :src="activityDetail.image" mode="aspectFill" class="image"></image>
        <view class="image-overlay">
          <view class="status-badge" :class="getStatusClass(activityDetail.status)">
            <text class="status-text">{{ activityDetail.statusText }}</text>
          </view>
        </view>
      </view>

      <!-- 活动基本信息 -->
      <view class="activity-info">
        <view class="info-header">
          <text class="activity-title">{{ activityDetail.title }}</text>
          <view class="activity-type">
            <u-tag 
              :text="activityDetail.type" 
              type="primary"
              size="normal"
            ></u-tag>
          </view>
        </view>

        <view class="info-body">
          <text class="activity-description">{{ activityDetail.description }}</text>
        </view>

        <view class="info-meta">
          <view class="meta-item">
            <u-icon name="calendar" size="16" color="#52c41a"></u-icon>
            <view class="meta-content">
              <text class="meta-label">活动时间</text>
              <text class="meta-value">{{ activityDetail.startTime }} - {{ activityDetail.endTime }}</text>
            </view>
          </view>
          
          <view class="meta-item">
            <u-icon name="map-pin" size="16" color="#52c41a"></u-icon>
            <view class="meta-content">
              <text class="meta-label">活动地点</text>
              <text class="meta-value">{{ activityDetail.location }}</text>
            </view>
          </view>
          
          <view class="meta-item">
            <u-icon name="users" size="16" color="#52c41a"></u-icon>
            <view class="meta-content">
              <text class="meta-label">参与人数</text>
              <text class="meta-value">{{ activityDetail.registeredCount }}/{{ activityDetail.maxParticipants }}人</text>
            </view>
          </view>
          
          <view class="meta-item">
            <u-icon name="wallet" size="16" color="#52c41a"></u-icon>
            <view class="meta-content">
              <text class="meta-label">活动费用</text>
              <text class="meta-value" :class="{ free: activityDetail.price === 0 }">
                {{ activityDetail.price === 0 ? '免费' : `¥${activityDetail.price}` }}
              </text>
            </view>
          </view>
        </view>
      </view>

      <!-- 活动详情 -->
      <view class="activity-details">
        <view class="section-title">
          <u-icon name="file-text" size="16" color="#52c41a"></u-icon>
          <text class="title-text">活动详情</text>
        </view>
        <view class="details-content">
          <rich-text :nodes="activityDetail.content"></rich-text>
        </view>
      </view>

      <!-- 活动须知 -->
      <view class="activity-notice">
        <view class="section-title">
          <u-icon name="info-circle" size="16" color="#52c41a"></u-icon>
          <text class="title-text">活动须知</text>
        </view>
        <view class="notice-content">
          <view 
            v-for="(notice, index) in activityDetail.notices" 
            :key="index"
            class="notice-item"
          >
            <text class="notice-text">{{ notice }}</text>
          </view>
        </view>
      </view>

      <!-- 活动图片 -->
      <view v-if="activityDetail.images && activityDetail.images.length > 0" class="activity-images">
        <view class="section-title">
          <u-icon name="image" size="16" color="#52c41a"></u-icon>
          <text class="title-text">活动图片</text>
        </view>
        <view class="images-grid">
          <view 
            v-for="(image, index) in activityDetail.images" 
            :key="index"
            class="image-item"
            @click="handlePreviewImage(index)"
          >
            <image :src="image.url" mode="aspectFill" class="image"></image>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部操作栏 -->
    <view class="bottom-actions">
      <view class="action-left">
        <view class="action-btn" @click="handleLike">
          <u-icon name="heart" size="18" :color="isLiked ? '#ff4757' : '#999'"></u-icon>
          <text class="btn-text" :class="{ liked: isLiked }">{{ isLiked ? '已点赞' : '点赞' }}</text>
        </view>
        <view class="action-btn" @click="handleCollect">
          <u-icon name="star" size="18" :color="isCollected ? '#ffa502' : '#999'"></u-icon>
          <text class="btn-text" :class="{ collected: isCollected }">{{ isCollected ? '已收藏' : '收藏' }}</text>
        </view>
      </view>
      
      <view class="action-right">
        <view 
          class="register-btn" 
          :class="getButtonClass(activityDetail.status)"
          @click="handleRegistration"
        >
          <text class="btn-text">{{ getButtonText(activityDetail.status) }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'

// 活动详情数据
const activityDetail = reactive({
  id: 1,
  title: '社区春节联欢晚会',
  type: '文艺演出',
  status: 1,
  statusText: '报名中',
  description: '社区将于2月8日晚举办春节联欢晚会，现开始报名，欢迎有才艺的居民积极参与，共同营造欢乐祥和的节日氛围。',
  startTime: '2025-02-10 19:00',
  endTime: '2025-02-10 21:30',
  location: '社区活动中心',
  registeredCount: 45,
  maxParticipants: 100,
  price: 0,
  image: 'https://example.com/images/spring-festival.jpg',
  content: `
    <p>亲爱的社区居民：</p>
    <p>春节将至，为了丰富社区居民的文化生活，营造欢乐祥和的节日氛围，社区将于2月10日晚举办春节联欢晚会。</p>
    <p><strong>活动安排：</strong></p>
    <ul>
      <li>19:00-19:30 入场签到</li>
      <li>19:30-20:00 开场致辞</li>
      <li>20:00-21:00 文艺表演</li>
      <li>21:00-21:30 互动环节</li>
    </ul>
    <p><strong>表演节目：</strong></p>
    <ul>
      <li>舞蹈表演：社区舞蹈队</li>
      <li>歌曲演唱：居民才艺展示</li>
      <li>相声小品：幽默风趣</li>
      <li>乐器演奏：古筝、二胡等</li>
    </ul>
    <p>欢迎有才艺的居民积极参与，共同为社区营造温馨和谐的节日氛围！</p>
  `,
  notices: [
    '请提前30分钟到场签到',
    '活动期间请保持安静，不要大声喧哗',
    '请携带身份证件进行身份验证',
    '活动结束后请有序离场',
    '如有疑问请联系社区工作人员'
  ],
  images: [
    {
      url: 'https://example.com/images/spring-festival-1.jpg',
      name: '春节联欢晚会现场1'
    },
    {
      url: 'https://example.com/images/spring-festival-2.jpg',
      name: '春节联欢晚会现场2'
    },
    {
      url: 'https://example.com/images/spring-festival-3.jpg',
      name: '春节联欢晚会现场3'
    }
  ]
})

// 用户操作状态
const isLiked = ref(false)
const isCollected = ref(false)

// 获取状态样式类
const getStatusClass = (status: number) => {
  switch (status) {
    case 1: return 'status-ongoing'
    case 2: return 'status-upcoming'
    case 3: return 'status-ended'
    default: return 'status-default'
  }
}

// 获取按钮样式类
const getButtonClass = (status: number) => {
  switch (status) {
    case 1: return 'btn-register'
    case 2: return 'btn-upcoming'
    case 3: return 'btn-ended'
    default: return 'btn-default'
  }
}

// 获取按钮文本
const getButtonText = (status: number) => {
  switch (status) {
    case 1: return '立即报名'
    case 2: return '即将开始'
    case 3: return '已结束'
    default: return '查看详情'
  }
}

// 返回上一页
const handleBack = () => {
  uni.navigateBack()
}

// 分享功能
const handleShare = () => {
  uni.share({
    provider: 'weixin',
    scene: 'WXSceneSession',
    type: 0,
    href: 'https://example.com/activity/1',
    title: activityDetail.title,
    summary: activityDetail.description,
    imageUrl: activityDetail.image,
    success: () => {
      uni.showToast({
        title: '分享成功',
        icon: 'success'
      })
    },
    fail: () => {
      uni.showToast({
        title: '分享失败',
        icon: 'error'
      })
    }
  })
}

// 预览图片
const handlePreviewImage = (index: number) => {
  const urls = activityDetail.images.map(img => img.url)
  uni.previewImage({
    current: index,
    urls: urls
  })
}

// 点赞功能
const handleLike = () => {
  isLiked.value = !isLiked.value
  uni.showToast({
    title: isLiked.value ? '点赞成功' : '取消点赞',
    icon: 'success'
  })
}

// 收藏功能
const handleCollect = () => {
  isCollected.value = !isCollected.value
  uni.showToast({
    title: isCollected.value ? '收藏成功' : '取消收藏',
    icon: 'success'
  })
}

// 报名处理
const handleRegistration = () => {
  if (activityDetail.status === 1) {
    // 跳转到报名页面
    uni.navigateTo({
      url: `/pages/activity-registration/register?id=${activityDetail.id}`
    })
  } else if (activityDetail.status === 2) {
    uni.showToast({
      title: '活动尚未开始报名',
      icon: 'none'
    })
  } else if (activityDetail.status === 3) {
    uni.showToast({
      title: '活动已结束',
      icon: 'none'
    })
  }
}

// 页面加载
onMounted(() => {
  console.log('活动详情页面加载完成')
})
</script>

<style lang="scss" scoped>
.activity-detail {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 120rpx;
}

.page-header {
  background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
  padding: 20rpx 30rpx;
  
  .header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .back-btn,
    .share-btn {
      width: 60rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .header-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #fff;
    }
  }
}

.activity-content {
  .activity-image {
    position: relative;
    width: 100%;
    height: 400rpx;
    
    .image {
      width: 100%;
      height: 100%;
    }
    
    .image-overlay {
      position: absolute;
      top: 20rpx;
      right: 20rpx;
      
      .status-badge {
        padding: 12rpx 24rpx;
        border-radius: 30rpx;
        font-size: 24rpx;
        font-weight: 500;
        
        &.status-ongoing {
          background-color: #52c41a;
          color: #fff;
        }
        
        &.status-upcoming {
          background-color: #faad14;
          color: #fff;
        }
        
        &.status-ended {
          background-color: #d9d9d9;
          color: #666;
        }
      }
    }
  }
  
  .activity-info {
    background-color: #fff;
    padding: 40rpx 30rpx;
    margin-bottom: 20rpx;
    
    .info-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 20rpx;
      
      .activity-title {
        flex: 1;
        font-size: 36rpx;
        font-weight: 600;
        color: #333;
        line-height: 1.4;
        margin-right: 20rpx;
      }
      
      .activity-type {
        flex-shrink: 0;
      }
    }
    
    .info-body {
      margin-bottom: 30rpx;
      
      .activity-description {
        font-size: 28rpx;
        color: #666;
        line-height: 1.6;
      }
    }
    
    .info-meta {
      .meta-item {
        display: flex;
        align-items: center;
        gap: 20rpx;
        margin-bottom: 24rpx;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .meta-content {
          flex: 1;
          
          .meta-label {
            display: block;
            font-size: 24rpx;
            color: #999;
            margin-bottom: 8rpx;
          }
          
          .meta-value {
            font-size: 28rpx;
            color: #333;
            font-weight: 500;
            
            &.free {
              color: #52c41a;
            }
          }
        }
      }
    }
  }
  
  .activity-details,
  .activity-notice,
  .activity-images {
    background-color: #fff;
    padding: 40rpx 30rpx;
    margin-bottom: 20rpx;
    
    .section-title {
      display: flex;
      align-items: center;
      gap: 12rpx;
      margin-bottom: 20rpx;
      
      .title-text {
        font-size: 30rpx;
        font-weight: 600;
        color: #333;
      }
    }
    
    .details-content {
      :deep(p) {
        font-size: 28rpx;
        color: #333;
        line-height: 1.6;
        margin-bottom: 20rpx;
      }
      
      :deep(strong) {
        font-weight: 600;
        color: #52c41a;
      }
      
      :deep(ul) {
        margin: 20rpx 0;
        padding-left: 40rpx;
        
        li {
          font-size: 28rpx;
          color: #333;
          line-height: 1.6;
          margin-bottom: 12rpx;
        }
      }
    }
    
    .notice-content {
      .notice-item {
        display: flex;
        align-items: flex-start;
        gap: 12rpx;
        margin-bottom: 16rpx;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .notice-text {
          flex: 1;
          font-size: 28rpx;
          color: #666;
          line-height: 1.5;
        }
      }
    }
    
    .images-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16rpx;
      
      .image-item {
        aspect-ratio: 1;
        border-radius: 12rpx;
        overflow: hidden;
        
        .image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}

.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 20rpx 30rpx;
  border-top: 1rpx solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  .action-left {
    display: flex;
    gap: 40rpx;
    
    .action-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8rpx;
      
      .btn-text {
        font-size: 24rpx;
        color: #999;
        
        &.liked {
          color: #ff4757;
        }
        
        &.collected {
          color: #ffa502;
        }
      }
    }
  }
  
  .action-right {
    .register-btn {
      padding: 20rpx 60rpx;
      border-radius: 40rpx;
      font-size: 28rpx;
      font-weight: 500;
      text-align: center;
      transition: all 0.3s ease;
      
      &.btn-register {
        background-color: #52c41a;
        color: #fff;
        
        &:active {
          background-color: #389e0d;
        }
      }
      
      &.btn-upcoming {
        background-color: #faad14;
        color: #fff;
      }
      
      &.btn-ended {
        background-color: #d9d9d9;
        color: #666;
      }
    }
  }
}
</style>
